<template>
  <div class="ProductReviews">
    <van-nav-bar
      fixed
      left-arrow
      title="商品评价页"
      @click-left="$router.back()"
    />
    <van-tabs v-model="active">
      <van-tab v-for="item in dome" :key="item.id">
        <template #title>
          <div @click="add(item.type)">{{ item.name }}({{ list.total }})</div>
        </template>
        <div class="comment-list">
          <div
            v-for="item in evaluateList"
            :key="item.commen_id"
            class="comment-item"
          >
            <div class="top">
              <img :src="item.user.avavter_url || defaultImg" alt="" />
              <div class="name">{{ item.user.nick_name }}</div>
              <van-rate
                :size="16"
                :value="item.score / 3"
                color="#ffd21e"
                void-color="#eee"
                void-icon="star"
              />
            </div>
            <div class="content">{{ item.content }}</div>
            <div class="time">{{ item.create_time }}</div>
            <div v-if="item.images.length > 0" class="image">
              <img :src="item.images[0].image_url" alt="" class="img1" />
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { getAppraiseList } from '@/api/detail'
import defaultImg from '@/assets/yishu.jpg'

export default {
  name: 'ProductReviews',
  components: {},
  data () {
    return {
      dome: [
        { id: 1, name: '全部', type: -1 },
        { id: 2, name: '好评', type: 10 },
        { id: 3, name: '中评', type: 20 },
        { id: 4, name: '差评', type: 30 }
      ],
      active: 0,
      defaultImg,
      evaluateList: [], // 评价列表
      scoreType: -1,
      page: 1,
      total: 0,
      list: []
    }
  },
  computed: {
    goodsId () {
      return this.$route.query.goodsId
    }
  },
  methods: {
    add (index) {
      this.scoreType = index
      console.log(this.scoreType)
      this.getEvaluate()
    },
    async getEvaluate () {
      const {
        data: {
          data: { list }
        }
      } = await getAppraiseList(this.scoreType, this.goodsId, this.page)
      console.log(list)
      this.evaluateList = list.data
      this.total = list.total
      this.list = list
    }
  },
  created () {
    this.getEvaluate()
  }
}
</script>
<style lang="less">
.ProductReviews {
  .van-nav-bar__title {
    font-weight: bold;
  }

  .van-tabs {
    margin-top: 46px;
  }

  .comment-list {
    width: 90%;
    margin: auto;

    .comment-item {
      font-size: 16px;
      line-height: 30px;

      .top {
        height: 30px;
        display: flex;
        align-items: center;
        margin-top: 20px;

        img {
          width: 20px;
          height: 20px;
        }

        .name {
          margin: 0 10px;
        }
      }

      .time {
        color: #999;
      }

      .image {
        width: 200px;

        .img1 {
          width: 100%;
        }
      }
    }
  }
}
</style>
